<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="https://weibo.com/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_3335055_fj12hb2u3sa.css">
  <title>Vite App</title>
</head>

<body>
  <div id="app">
    <div id="container">
      <div id="header">
        <div class="header-top">
          <div class="header-top-left">
            <img src="./images/logo2.png" alt="">
            <div class="search">
              <i class="iconfont icon-31sousuo"></i>
              <input type="text" placeholder="搜索微博">
              <div class="search-con">
                <div class="no-search">
                  <i class="iconfont icon-jubao"></i>
                  <div>暂无搜索内容</div>
                </div>
              </div>
            </div>
          </div>
          <div class="header-top-ecnter">
            <i class="iconfont icon-shouye"></i>
            <div class="homemsg">NEW</div>
            <i class="iconfont icon-dianshiju"></i>
            <i class="iconfont icon-remen"></i>
            <i class="iconfont icon-email"></i>
            <div class="avatar">
              <img src="./images/avator.webp" alt="">
            </div>
          </div>
          <div class="header-top-right">
            <div class="weibo">
              <div class="iconfont icon-gouwu"></div>
              <div class="iconfont icon-youxi"></div>
            </div>
            <div class="operate">
              <div class="iconfont icon-quanjushezhi"></div>
              <div class="iconfont icon-sun"></div>
              <div class="iconfont icon-tianxie"></div>
            </div>
            <div class="noprevent">无障碍</div>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="slide">
          <h1>首页</h1>
          <ul>
            <li>
              <i class="iconfont icon-iconfonticonliebiao1"></i>
              <span>全部关注</span>
            </li>
            <li>
              <i class="iconfont icon-mingxinghuodong"></i>
              <span>最新微博</span>
            </li>
            <li>
              <i class="iconfont icon-guanzhu"></i>
              <span>特别关注</span>
            </li>
            <li>
              <i class="iconfont icon-huxiangguanzhuren"></i>
              <span>好友圈</span>
            </li>
          </ul>
          <div class="manger">
            <h1>
              自定义分组
              <span>管理</span>
            </h1>
            <ul>
              <li>
                <i class="iconfont icon-dian"></i>
                <span>微博好友</span>
              </li>
              <li>
                <i class="iconfont icon-dian"></i>
                <span>明星</span>
              </li>
              <li>
                <i class="iconfont icon-dian"></i>
                <span>同学</span>
              </li>
              <li>
                <i class="iconfont icon-dian"></i>
                <span>名人明星</span>
              </li>
              <li>
                <i class="iconfont icon-dian"></i>
                <span>同事</span>
              </li>
              <li>
                <i class="iconfont icon-dian"></i>
                <span>悄悄关注</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="main-content">
          <div class="share">
            <div class="text">
              <textarea placeholder="有什么新鲜事想分享给大家吗？" style="width: 100%;height: 60px;"></textarea>
            </div>
            <div class="clock">
              <div class="left">
                <div>发布时间</div>
                <div>2022/5/1</div>
                <div>17时 <i class="iconfont icon-xiangxiajiantou"></i></div>
                <div>57分 <i class="iconfont icon-xiangxiajiantou"></i></div>
              </div>
              <div class="right">
                <span><a href="">管理待发布的微博</a></span>
                <span class="close">x</span>
              </div>
            </div>
            <div class="tools">
              <div class="tools-left">
                <i class="iconfont icon-xiaolian"></i>
                <i class="iconfont icon-icon-"></i>
                <i class="iconfont icon-icon_shiping"></i>
                <i class="iconfont icon-at"></i>
                <i class="iconfont icon-huati"></i>
                <i class="iconfont icon-dizhiguanli"></i>
                <i class="iconfont icon-zuanshi"></i>
                <i class="iconfont icon-shandian"></i>
                <i class="iconfont icon-liebiao-dian"></i>
              </div>
              <div class="tools-right">
                <i class="iconfont icon-shizhong"></i>
                <div>
                  <span>公开</span>
                  <span class="iconfont icon-xiajiantou"></span>
                </div>
                <button>发送</button>
              </div>
            </div>
          </div>
          <div class="main-header">
            <div>全部</div>
            <div>原创</div>
            <div>视频</div>
            <div>V+微博</div>
            <div>群微博</div>
          </div>
          <div class="main-content-body">
            <!-- <div>
              <div class="main-content-body-header">
                <div class="left">
                  <div class="avatar">
                    <img src="./images/avator.webp" alt="">
                    <div class="mask"></div>
                    <i class="iconfont icon-renzheng"></i>
                  </div>
                  <div class="info">
                    <div class="info-top">
                      <h4>人民网</h4>
                      <span>
                        <i class="iconfont icon-huangguan"></i>
                        <a href="">
                          <img src="https://h5.sinaimg.cn/upload/106/1683/2022/03/18/feed_icon_chuntian_default.png"
                            alt="你好春天" title="你好春天">
                        </a>
                      </span>
                    </div>
                    <div class="info-bottom">
                      <a href="">1分钟前</a>
                      <span>来自</span>
                      <span>微博视频号</span>
                    </div>
                  </div>
                </div>
                <div class="right">
                  <i class="iconfont icon-xiajiantou"></i>
                </div>
              </div>
              <div class="main-content-body-article">
                【惟妙惟肖！】<a href="">#男子用500条轮胎雕出12生肖兽首#</a>
                山东淄博，34岁的男子用500条废旧轮胎雕出了12生肖兽首，每个尺寸高度在一米左右，最大的是鸡首，高度1.2米、重达200斤。男子称以前是做铁艺行业，改行做轮胎雕塑已经有4年了，之所以雕12生肖兽首是想弘扬中国传统文化。<a
                  href="">@山海视频</a> <a href="">山海视频的微博视频</a> ​​​
              </div>
              <div class="video">
                <video
                  src="//f.video.weibocdn.com/o0/sGXlqp0Wlx07VliPaG5i010412014LjL0E010.mp4?label=mp4_1080p&template=1920x1080.25.0&media_id=4759195745189984&tp=8x8A3El:YTkl0eM8&us=0&ori=1&bf=5&ot=h&lp=000027a3Ta&ps=mZ6WB&uid=7Gjt1e&ab=7397-g1,6377-g0,1192-g0,1258-g0&Expires=1650173468&ssig=waKOBXst0n&KID=unistore,video"
                  controls></video>
              </div>
              <div class="footer">
                <div class="iconfont icon-fenxiang">
                  转发
                </div>
                <div class="iconfont icon-liuyan">
                  评论
                </div>
                <div class="iconfont icon-dianzan">
                  点赞
                </div>
              </div>
            </div> -->
          </div>
          
        </div>
        <div class="hot">
          <span class="goTop">
            <div class="top">
              <i class="iconfont icon-fanhuidingbu"></i>
            </div>
          </span>
          <div class="hot-top">
            <div class="title">
              <a href="">
                <h4>微博热搜</h4>
              </a>
              <div class="iconfont icon-shuaxin">点击刷新</div>
            </div>
            <ul class="hot-list">
              <!-- <li>
                <div class="left">
                  <span>
                    <i class="iconfont icon-12"></i>
                  </span>
                  <span>迪迦奥特曼和懒羊羊大战三百</span>
                  <span>317.1万</span>
                </div>
                <div class="right">热</div>
              </li> -->
              
            </ul>
            <div class="complete">查看完整热度榜单</div>
          </div>
          <div class="hot-follow">
            <div class="hot-l-t">
              <div class="hot-l-df">
                <h4>你可能感兴趣的人</h4>
                <div class="list">
                  <i class="iconfont icon-xiangzuojiantou"></i>
                  <span>1/17</span>
                  <i class="iconfont icon-xiangyoujiantou"></i>
                </div>
              </div>
            </div>
            <div class="hot-info">
              <div class="hot-info-person">
                <div class="avatar">
                  <img src="./images/avator.webp" alt="">
                  <i class="iconfont icon-renzheng"></i>
                </div>
                <div class="infos">
                  <span class="title">BIGBANG_GD</span>
                  <p>韩国男子组合偶像天团</p>
                </div>
                <div class="follows">
                  +关注
                </div>

              </div>
            </div>
            <div class="hot-info">
              <div class="hot-info-person">
                <div class="avatar">
                  <img src="./images/avator.webp" alt="">
                  <i class="iconfont icon-renzheng"></i>
                </div>
                <div class="infos">
                  <span class="title">BIGBANG_GD</span>
                  <p>韩国男子组合偶像天团</p>
                </div>
                <div class="follows">
                  +关注
                </div>

              </div>
            </div>
            <div class="hot-info">
              <div class="hot-info-person">
                <div class="avatar">
                  <img src="./images/avator.webp" alt="">
                  <i class="iconfont icon-renzheng"></i>
                </div>
                <div class="infos">
                  <span class="title">BIGBANG_GD</span>
                  <p>韩国男子组合偶像天团</p>
                </div>
                <div class="follows">
                  +关注
                </div>

              </div>
            </div>
          </div>
          <div class="hot-footer">
            微博管理中心 <i class="iconfont icon-xiangyoujiantou"></i>
          </div>
          <div class="CopyRight">
            <div class="copyRight-category">
              <div class="copy-header">
                <i class="iconfont icon-kefu"></i>
                <div>帮助中心</div>
              </div>
              <div class="copy-bottom">
                <a href="#">微博客服4000-960-960</a>
                <a href="#">自助服务中心</a>
                <a href="#">常见问题</a>
              </div>
            </div>
            <div class="copyRight-category">
              <div class="copy-header">
                <i class="iconfont icon-a-hezuowoshoujiaoliu-02"></i>
                <div>合作&服务</div>
              </div>
              <div class="copy-bottom">
                <a href="#">微博营销</a>
                <a href="#">合作热线4000-980-980</a>
                <a href="#">开放平台</a>
                <a href="#">更多</a>
              </div>
            </div>
            <div class="copyRight-category">
              <div class="copy-header">
                <i class="iconfont icon-jubao"></i>
                <div>举报中心</div>
              </div>
              <div class="copy-bottom">
                <a href="#">违规投诉 010-60618076</a>
                <a href="#">处理大厅</a>
                <a href="#">舞弊举报</a>
                <a href="#">更多</a>
              </div>
            </div>
            <div class="copyRight-category">
              <div class="copy-header">
                <i class="iconfont icon-jiaoseguanli"></i>
                <div>关于微博</div>
              </div>
              <div class="copy-bottom">
                <a href="#">About Weibo</a>
                <a href="#">客户端下载</a>
                <a href="#">微博招聘</a>
                <a href="#">网站备案信息</a>
              </div>
            </div>
          </div>
          <div class="logo">
            <img src="./images/favicon.ico" alt="">
            <span> Copyright © 2009-2022 </span>
            <!-- <a href="">WEIBO</a> -->
            <img src="./images/32aria.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="module" src="/main.js"></script>
</body>

</html>